<ui:composition template="/template/templateSGRUsuario.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:param name="nombreparam" value="pedido" />
    <ui:param name="duracionparam" value="7000" />
    <ui:define name="index">
        <h:form id="pedidoForm" >
            <article id="content">
                <div class="wrap">
                    <section class="cols">
                        <div class="box">
                            <div>
                                <h2>Realiza tu  <span>Pedido</span></h2>
                                <c:if test="#{sesion.activa and pCPedidoExt.consultarPermisos().alta}">
                                    <figure><h:graphicImage library="theme/images"  name="page4_img4.jpg" alt="Pedido Nuevo" /></figure>
                                    <p class="pad_bot1">Realiza tu pedido a domicilio en tres simples pasos.</p>
                                    <p:commandLink  value="Crea tu pedido"
                                                    actionListener="#{pCPedidoExt.setearCliente()}"
                                                    process="@this" title="Crear un #{lenguajeBean.devolverString(nombreparam)} desde esta #{lenguajeBean.devolverString(nombreparam)}"
                                                    update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                                                    oncomplete="wvdlgdata#{nombreparam}.show();"
                                                    style="margin-right: 2px;" styleClass="button1">
                                    </p:commandLink>
                                </c:if>
                                <c:if test="#{!sesion.activa}">
                                    <p:outputLabel value="Para realizar un pedido debe "/>
                                    <p:commandLink action="login" immediate="true" value="Iniciar Sesión"/>
                                </c:if>
                            </div>
                        </div>
                    </section>

                    <section class="cols pad_left1">
                        <div class="box">
                            <div>
                                <h2 class="letter_spacing">Tres simples<span> pasos</span></h2>                         
                                <ul style="list-style-type: disc; margin-left: 30px;">
                                    <li><h:outputText value="Selecciona lo que deseas "/></li>
                                    <li><h:outputText value="A la izquierda ves los detalles de tu pedido"/></li>
                                    <li><h:outputText value="Guarda tu pedido y listo!"/></li> 
                                    <c:if test="#{!sesion.activa}">
                                        <li><h:outputText value="Si no tienes cuenta... " ></h:outputText><p:commandLink value="Crea una ahora mismo!!  " action="crearCuenta" immediate="true"/> </li> 
                                    </c:if>
                                    <c:if test="#{sesion.activa}">
                                        <li><h:outputText value="Dirección de envìo: #{pCPedidoExt.mi_sesion.usuario.calle} #{pCPedidoExt.mi_sesion.usuario.ciudad} "/> </li> 
                                        <li><p:commandLink value="Puedes modificar tu dirección..." action="autogestion" immediate="true"/> </li> 
                                    </c:if>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <section class="cols pad_left1">
                        <div class="box">
                            <div>
                                <h2 style="font-size: 200%">Especial <span>de la Casa</span></h2>
                                <ui:include src="especialCasa.xhtml"/>
                            </div>
                        </div>
                    </section>

                </div>
            </article>

            <h:outputScript>
                function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
            </h:outputScript>
        </h:form>

        <h:form id="formdata#{nombreparam}" >
            <p:growl id="growldata#{nombreparam}" widgetVar="wvgrowldata#{nombreparam}"
                     autoUpdate="false" showDetail="false" globalOnly="false"   life="#{duracionparam}" /> 
            <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="900px"
                      widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}" 
                      header="#{pCPedidoInt.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam)}"
                      hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}" position="right top">
                <h:panelGroup id="paneldialogodata#{nombreparam}" layout="block"
                              style="overflow: auto; display: block;">
                    <ui:include src="dialogo_pedidos.xhtml"/>
                    <h:panelGrid columns="2" style="margin-top: 10px;">
                        <h:column>
                            <h:outputText value="(*)Fecha y hora de envío:"/>
                        </h:column>
                        <h:column>
                            <p:calendar value="#{pCPedidoExt.fechaHoy}" id="popupButtonCal" showOn="button" required="true"
                                        minHour="10" maxHour="22" minMinute="0" maxMinute="59" pattern="dd/MM/yyyy HH:mm"
                                        readonlyInput="true" requiredMessage="El campo Fecha es obligatrio" effect="explode"
                                        mindate="#{pCPedidoExt.minFecha}" maxdate="#{pCPedidoExt.maxFecha}" size="18"/>
                        </h:column>
                    </h:panelGrid> 
                    <p:accordionPanel style="margin-top:10px">  
                        <p:tab title="Dirección de Envío">  
                            <h:panelGrid columns="2" >
                                <h:outputText value="(*)Dirección de envío:"  />
                                <h:column>
                                    <p:inputTextarea rows="2" cols="60" id="cols" maxlength="255" 
                                                     required="true" requiredMessage="Debe ingresar una diracciòn de envìo"
                                                     autoResize="false" value="#{pCPedidoExt.direccionAd}"  
                                                     counter="contdata#{nombreparam}"  counterTemplate="{0} caracteres restantes">
                                        <p:watermark value="Quiero enviar mi pedido a otra dirección, solo por hoy..." for ="cols"/>
                                    </p:inputTextarea>        
                                    <h:panelGroup layout="block" id="x2#{nombreparam}" style="margin-left:5px;">
                                        <h:outputText id="contdata#{nombreparam}" style="font-size: 10px;"/>
                                    </h:panelGroup>
                                </h:column>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Comentarios"> 
                            <h:panelGrid columns="2" >
                                <h:outputText value="Comentarios:"/>
                                <h:column>
                                    <p:inputTextarea rows="2" cols="60" id="cols2" maxlength="100" autoResize="false" 
                                                     counter="contdata2#{nombreparam}"  counterTemplate="{0} caracteres restantes" 
                                                     value="#{pCPedidoExt.temporal.comentarios}" >
                                        <p:watermark value="Quiero agregar comentarios para mi pedido ..." for ="cols2"/>
                                    </p:inputTextarea>        
                                </h:column>
                            </h:panelGrid>
                            <h:panelGroup layout="block" id="x1#{nombreparam}" style="margin-left:100px;">
                                <h:outputText id="contdata2#{nombreparam}" style="font-size: 10px;"/>
                            </h:panelGroup>
                        </p:tab>

                    </p:accordionPanel>
                </h:panelGroup>
            </p:dialog>
        </h:form>
    </ui:define> 
</ui:composition>
